<template>
	<view>
		<view class="page-container">
			<!-- 底层图片 -->
			<image src="/pages/Car/static/图层1@2x.png" class="bg-image" mode="widthFix" />

			<!-- 上层可显示的内容（如文字、按钮等） -->
			<view class="top-content">
				<view class="navigator">我的车辆</view>
				<view class="carView">
					<view class="top">
						<image src="/pages/Car/static/car01.png"></image>
						<view class="top-right">
							<view class="bigText">车型：奔驰-GR</view>
							<view class="smallText"> 车牌：豫M35468</view>
						</view>
					</view>
					<view class="bottom">
						<view class="bottomLeft">
							<view class="custom-radio" :class="{checked: isChecked}" @tap="toggleRadio">
								<image v-if="isChecked" class="radio-image" src="/pages/Car/static/选中@2x.png" mode="aspectFit"></image>
							</view>
							<text class="radio-label">设为默认车辆</text>
						</view>
						<view class="bottomRight">删除</view>
					</view>
				</view>
			</view>
			<view class="fixed-bottom-box">
				+ 添加新车辆
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

const isChecked = ref(true)

const toggleRadio = () => {
  isChecked.value = !isChecked.value
}
</script>

<style>
	/* 父容器：用于约束子元素的定位范围 */
	.page-container {
		position: relative;
		/* 父容器相对定位，子元素可基于此绝对定位 */
		width: 100%;
		height: 100vh;
		/* 占满整个屏幕高度，可根据需求调整 */
	}

	/* 底层图片：z-index 设为较小值，确保在最底层 */
	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1;
		/* 层级最低，作为背景 */
	}

	/* 上层内容：z-index 设为较大值，覆盖在图片上方 */
	.top-content {
		position: relative;
		z-index: 2;
		/* 层级高于图片，可显示在图片上方 */
		color: #fff;
		/* 文字颜色 */
		padding: 30rpx;
	}

	.navigator {
		display: flex;
		justify-content: center;
	}

	.carView {
		height: 330rpx;
		background-color: #fff;
		margin: 50rpx 15rpx;
		border-radius: 20rpx;
	}

	.top {
		height: 130rpx;
		display: flex;
		padding: 60rpx 50rpx;
	}

	.top>image {
		height: 100rpx;
		width: 100rpx;
		border-radius: 100rpx;
	}

	.top-right {
		height: 100rpx;
		width: 250rpx;
		color: black;
		display: flex;
		flex-wrap: wrap;
		margin-left: 20rpx;
	}

	.smallText {
		font-size: small;
	}

	.bottom {
		padding: 0 60rpx;
		display: flex;
		justify-content: space-between;
	}

    .bottomLeft{
		display: flex;
	}
	.custom-radio {
	    width: 30rpx;
	    height: 30rpx;
	    border: 2rpx solid #ccc; /* 默认灰色边框 */
	    border-radius: 50%;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    margin-right: 10rpx;
	    background-color: #fff;
	  }
	  .radio-image {
	      width: 30rpx;
	      height: 30rpx;
	    }
	    
	    .radio-label {
	      font-size: 25rpx;
	      color: black;
	    }
		.bottomRight{
			font-size: 25rpx;
			color: black;
		}
		
	.fixed-bottom-box {
		position: fixed;
		bottom: 10rpx;
		margin: 0 50rpx;
		height: 100rpx;
		width: 650rpx;
		height: 70rpx;
		font-size: 30rpx;
		color: white;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 3;
		padding-bottom: env(safe-area-inset-bottom); /* 适配安全区 */
		border-top: 1rpx solid #f5f5f5;
		background-color: #007AFF;
		border-radius: 50rpx;
	}
	
</style>